<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="pandoc" />


<meta name="author" content="Yiying Wang" />

<meta name="date" content="2017-03-15" />

<title>recharts: An R Interface to Baidu ECharts 2</title>

<script src="libs/jquery-1.11.3/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link href="libs/bootstrap-3.3.5/css/cosmo.min.css" rel="stylesheet" />
<script src="libs/bootstrap-3.3.5/js/bootstrap.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/html5shiv.min.js"></script>
<script src="libs/bootstrap-3.3.5/shim/respond.min.js"></script>
<script src="libs/navigation-1.1/tabsets.js"></script>
<script src="libs/htmlwidgets-0.8/htmlwidgets.js"></script>
<script src="libs/echarts-2.2.7/echarts-all.js"></script>
<script src="libs/charts-ext-2.2.7/main.js"></script>
<script src="libs/charts-ext-2.2.7/BMap.js"></script>
<script src="libs/echarts-binding-0.2/echarts.js"></script>


<style type="text/css">code{white-space: pre;}</style>
<style type="text/css">
div.sourceCode { overflow-x: auto; }
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; color: #aaaaaa; border-right: 1px solid #aaaaaa; }
td.sourceCode { padding-left: 5px; }
code > span.kw { color: #007020; font-weight: bold; } /* Keyword */
code > span.dt { color: #902000; } /* DataType */
code > span.dv { color: #40a070; } /* DecVal */
code > span.bn { color: #40a070; } /* BaseN */
code > span.fl { color: #40a070; } /* Float */
code > span.ch { color: #4070a0; } /* Char */
code > span.st { color: #4070a0; } /* String */
code > span.co { color: #60a0b0; font-style: italic; } /* Comment */
code > span.ot { color: #007020; } /* Other */
code > span.al { color: #ff0000; font-weight: bold; } /* Alert */
code > span.fu { color: #06287e; } /* Function */
code > span.er { color: #ff0000; font-weight: bold; } /* Error */
code > span.wa { color: #60a0b0; font-weight: bold; font-style: italic; } /* Warning */
code > span.cn { color: #880000; } /* Constant */
code > span.sc { color: #4070a0; } /* SpecialChar */
code > span.vs { color: #4070a0; } /* VerbatimString */
code > span.ss { color: #bb6688; } /* SpecialString */
code > span.im { } /* Import */
code > span.va { color: #19177c; } /* Variable */
code > span.cf { color: #007020; font-weight: bold; } /* ControlFlow */
code > span.op { color: #666666; } /* Operator */
code > span.bu { } /* BuiltIn */
code > span.ex { } /* Extension */
code > span.pp { color: #bc7a00; } /* Preprocessor */
code > span.at { color: #7d9029; } /* Attribute */
code > span.do { color: #ba2121; font-style: italic; } /* Documentation */
code > span.an { color: #60a0b0; font-weight: bold; font-style: italic; } /* Annotation */
code > span.cv { color: #60a0b0; font-weight: bold; font-style: italic; } /* CommentVar */
code > span.in { color: #60a0b0; font-weight: bold; font-style: italic; } /* Information */
</style>
<style type="text/css">
  pre:not([class]) {
    background-color: white;
  }
</style>


<style type="text/css">
h1 {
  font-size: 34px;
}
h1.title {
  font-size: 38px;
}
h2 {
  font-size: 30px;
}
h3 {
  font-size: 24px;
}
h4 {
  font-size: 18px;
}
h5 {
  font-size: 16px;
}
h6 {
  font-size: 12px;
}
.table th:not([align]) {
  text-align: left;
}
</style>

<link rel="stylesheet" href="/home/madlogos/R/x86_64-pc-linux-gnu-library/3.3/knitr/misc/vignette.css" type="text/css" />

</head>

<body>

<style type = "text/css">
.main-container {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
code {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.04);
}
img {
  max-width:100%;
  height: auto;
}
.tabbed-pane {
  padding-top: 12px;
}
button.code-folding-btn:focus {
  outline: none;
}
</style>



<div class="container-fluid main-container">

<!-- tabsets -->
<script>
$(document).ready(function () {
  window.buildTabsets("TOC");
});
</script>

<!-- code folding -->






<div class="fluid-row" id="header">



<h1 class="title toc-ignore">recharts: An R Interface to Baidu ECharts 2</h1>
<h4 class="author"><em>Yiying Wang</em></h4>
<h4 class="date"><em>2017-03-15</em></h4>

</div>

<div id="TOC">
<ul>
<li><a href="#knowledge-map-of-the-guidance"><span class="toc-section-number">1</span> Knowledge Map of the Guidance</a></li>
<li><a href="#hello-world"><span class="toc-section-number">2</span> Hello World</a></li>
<li><a href="#quick-start"><span class="toc-section-number">3</span> Quick Start</a><ul>
<li><a href="#data"><span class="toc-section-number">3.1</span> Data</a></li>
<li><a href="#core-plot"><span class="toc-section-number">3.2</span> Core Plot</a><ul>
<li><a href="#arguments"><span class="toc-section-number">3.2.1</span> Arguments</a></li>
<li><a href="#supported-chart-types"><span class="toc-section-number">3.2.2</span> Supported Chart Types</a></li>
<li><a href="#special-notes"><span class="toc-section-number">3.2.3</span> Special Notes</a></li>
</ul></li>
<li><a href="#modify-the-plot"><span class="toc-section-number">3.3</span> Modify the Plot</a><ul>
<li><a href="#tune-the-series"><span class="toc-section-number">3.3.1</span> Tune the Series</a></li>
<li><a href="#markline"><span class="toc-section-number">3.3.2</span> markLine</a></li>
<li><a href="#markpoint"><span class="toc-section-number">3.3.3</span> markPoint</a></li>
<li><a href="#title"><span class="toc-section-number">3.3.4</span> Title</a></li>
<li><a href="#legend"><span class="toc-section-number">3.3.5</span> Legend</a></li>
<li><a href="#toolbox"><span class="toc-section-number">3.3.6</span> Toolbox</a></li>
<li><a href="#datazoom"><span class="toc-section-number">3.3.7</span> DataZoom</a></li>
<li><a href="#axis"><span class="toc-section-number">3.3.8</span> Axis</a></li>
</ul></li>
<li><a href="#fortify-the-chart"><span class="toc-section-number">3.4</span> Fortify the Chart</a><ul>
<li><a href="#theme"><span class="toc-section-number">3.4.1</span> Theme</a></li>
<li><a href="#symbols"><span class="toc-section-number">3.4.2</span> Symbols</a></li>
</ul></li>
<li><a href="#altogether"><span class="toc-section-number">3.5</span> Altogether</a></li>
</ul></li>
<li><a href="#low-level-api"><span class="toc-section-number">4</span> Low-level API</a><ul>
<li><a href="#de-novo"><span class="toc-section-number">4.1</span> De Novo</a></li>
<li><a href="#modify-the-echarts-object"><span class="toc-section-number">4.2</span> Modify the Echarts Object</a></li>
</ul></li>
<li><a href="#finale"><span class="toc-section-number">5</span> Finale</a></li>
</ul>
</div>

<p><strong>Note:</strong> This package was forked from <a href="https://github.com/yihui/recharts">Yihui Xie</a> and is based on the last release of Baidu Echarts2 (v2.2.7). The documentation here always reflects the latest development version of <strong>recharts</strong> on <a href="https://github.com/madlogos/recharts">Github</a>. The package <a href="http://github.com/madlogos/recharts2">recharts2</a> that is based on Echarts3 is still under development.</p>
<p>To install the package:</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">if (!<span class="kw">require</span>(devtools)) <span class="kw">library</span>(devtools)
<span class="kw">install_github</span>(<span class="st">&quot;madlogos/recharts&quot;</span>)</code></pre></div>
<div id="knowledge-map-of-the-guidance" class="section level1">
<h1><span class="header-section-number">1</span> Knowledge Map of the Guidance</h1>
<ol style="list-style-type: decimal">
<li>Base Plots
<ol style="list-style-type: decimal">
<li>Mono-coordinate System
<ol style="list-style-type: decimal">
<li>Cartesian Coordinate System
<ol style="list-style-type: decimal">
<li><a href="Basic_Plots_01_Scatterplot.html">Scatter/Bubble Plot</a></li>
<li><a href="Basic_Plots_02_Bar.html">Bar/Column Chart</a></li>
<li><a href="Basic_Plots_03_Line.html">Line/Area Chart</a></li>
<li><a href="Basic_Plots_04_K.html">Candlestick/K Chart</a></li>
<li><a href="Basic_Plots_05_eventRiver.html">Event River Chart</a></li>
</ol></li>
<li>Others
<ol style="list-style-type: decimal">
<li><a href="Basic_Plots_11_Force.html">Force Chart</a></li>
<li><a href="Basic_Plots_12_Chord.html">Chord Chart</a></li>
<li><a href="Basic_Plots_13_WordCloud.html">Word Cloud</a></li>
<li><a href="Basic_Plots_14_Venn.html">Venn Chart</a></li>
<li><a href="Basic_Plots_15_Heatmap.html">Heatmap</a></li>
</ol></li>
</ol></li>
<li>Multi-coordinate System
<ol style="list-style-type: decimal">
<li>Polar Coordinate System
<ol style="list-style-type: decimal">
<li><a href="Basic_Plots_21_Pie.html">Pie/Ring/Rose Chart</a></li>
<li><a href="Basic_Plots_22_Funnel.html">Funnel/Pyramid Chart</a></li>
<li><a href="Basic_Plots_23_Radar.html">Radar Chart</a></li>
<li><a href="Basic_Plots_24_Gauge.html">Gauge Chart</a></li>
</ol></li>
<li>Others
<ol style="list-style-type: decimal">
<li><a href="Basic_Plots_31_Map.html">Map</a></li>
<li><a href="Basic_Plots_32_Tree.html">Tree Chart</a></li>
<li><a href="Basic_Plots_33_Treemap.html">Treemap</a></li>
</ol></li>
</ol></li>
</ol></li>
<li><a href="Mixed_Plots.html">Mixed Plots</a></li>
<li>Axis/Widget Configuration
<ol style="list-style-type: decimal">
<li>Tune Series
<ol style="list-style-type: decimal">
<li><a href="Misc_setSeries.html"><code>setSeries</code></a></li>
</ol></li>
<li>Axis/Grid
<ol style="list-style-type: decimal">
<li><a href="Widget_01_Axis.html"><code>setAxis</code></a></li>
<li><a href="Widget_02_Polar.html"><code>setPolar</code></a></li>
<li><a href="Widget_03_Grid.html"><code>setGrid</code></a></li>
</ol></li>
<li>Graph Elements
<ol style="list-style-type: decimal">
<li><a href="Widget_11_markLine.html"><code>addMarkLine</code></a></li>
<li><a href="Widget_12_markPoint.html"><code>addMarkPoint</code></a></li>
</ol></li>
<li>Widgets
<ol style="list-style-type: decimal">
<li><a href="Widget_21_Title.html"><code>setTitle</code></a></li>
<li><a href="Widget_22_Legend.html"><code>setLegend</code></a></li>
<li><a href="Widget_23_Timeline.html"><code>setTimeline</code></a></li>
<li><a href="Widget_24_Toolbox.html"><code>setToolbox</code></a></li>
<li><a href="Widget_25_DataRange.html"><code>setDataRange</code></a></li>
<li><a href="Widget_26_DataZoom.html"><code>setDataZoom</code></a></li>
<li><a href="Widget_27_RoamController.html"><code>setRoam</code></a></li>
</ol></li>
<li>Feature Lists
<ol style="list-style-type: decimal">
<li><a href="Misc_aesStyle.html"><code>aesStyle</code></a></li>
</ol></li>
</ol></li>
<li>Aesthetic Configuration
<ol style="list-style-type: decimal">
<li><a href="Widget_31_Tooltip.html"><code>setTooltip</code></a></li>
<li><a href="Widget_32_SymbolList.html"><code>setSymbols</code></a></li>
<li><a href="Widget_33_Theme.html"><code>setTheme</code></a></li>
</ol></li>
<li><a href="Cust_Plots.html">Customization</a></li>
</ol>
</div>
<div id="hello-world" class="section level1">
<h1><span class="header-section-number">2</span> Hello World</h1>
<p>The R package <strong>recharts</strong> provides an interface to the JavaScript library <a href="http://echarts.baidu.com/echarts2">ECharts2</a> for data visualization. The goal of this package is to make it easy to create charts with only a few lines of R code. R users should be able to get started with ECharts without having to know HTML or JavaScript, although advanced users will benefit from their knowledge of JavaScript. Here is an example of a scatterplot that shows the basic syntax of this package:</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">library</span>(recharts)</code></pre></div>
<pre><code>## 
## Attaching package: &#39;recharts&#39;</code></pre>
<pre><code>## The following objects are masked _by_ &#39;.GlobalEnv&#39;:
## 
##     ChinaGDP, chinapm25, events, mideast, stock</code></pre>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(iris, Sepal.Length, Sepal.Width, <span class="dt">series =</span> Species)</code></pre></div>
<div id="htmlwidget-52c1a3f212de9155bf09" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-52c1a3f212de9155bf09">{"x":{"series":[{"name":"setosa","type":"scatter","data":[[5.1,3.5],[4.9,3],[4.7,3.2],[4.6,3.1],[5,3.6],[5.4,3.9],[4.6,3.4],[5,3.4],[4.4,2.9],[4.9,3.1],[5.4,3.7],[4.8,3.4],[4.8,3],[4.3,3],[5.8,4],[5.7,4.4],[5.4,3.9],[5.1,3.5],[5.7,3.8],[5.1,3.8],[5.4,3.4],[5.1,3.7],[4.6,3.6],[5.1,3.3],[4.8,3.4],[5,3],[5,3.4],[5.2,3.5],[5.2,3.4],[4.7,3.2],[4.8,3.1],[5.4,3.4],[5.2,4.1],[5.5,4.2],[4.9,3.1],[5,3.2],[5.5,3.5],[4.9,3.6],[4.4,3],[5.1,3.4],[5,3.5],[4.5,2.3],[4.4,3.2],[5,3.5],[5.1,3.8],[4.8,3],[5.1,3.8],[4.6,3.2],[5.3,3.7],[5,3.3]]},{"name":"versicolor","type":"scatter","data":[[7,3.2],[6.4,3.2],[6.9,3.1],[5.5,2.3],[6.5,2.8],[5.7,2.8],[6.3,3.3],[4.9,2.4],[6.6,2.9],[5.2,2.7],[5,2],[5.9,3],[6,2.2],[6.1,2.9],[5.6,2.9],[6.7,3.1],[5.6,3],[5.8,2.7],[6.2,2.2],[5.6,2.5],[5.9,3.2],[6.1,2.8],[6.3,2.5],[6.1,2.8],[6.4,2.9],[6.6,3],[6.8,2.8],[6.7,3],[6,2.9],[5.7,2.6],[5.5,2.4],[5.5,2.4],[5.8,2.7],[6,2.7],[5.4,3],[6,3.4],[6.7,3.1],[6.3,2.3],[5.6,3],[5.5,2.5],[5.5,2.6],[6.1,3],[5.8,2.6],[5,2.3],[5.6,2.7],[5.7,3],[5.7,2.9],[6.2,2.9],[5.1,2.5],[5.7,2.8]]},{"name":"virginica","type":"scatter","data":[[6.3,3.3],[5.8,2.7],[7.1,3],[6.3,2.9],[6.5,3],[7.6,3],[4.9,2.5],[7.3,2.9],[6.7,2.5],[7.2,3.6],[6.5,3.2],[6.4,2.7],[6.8,3],[5.7,2.5],[5.8,2.8],[6.4,3.2],[6.5,3],[7.7,3.8],[7.7,2.6],[6,2.2],[6.9,3.2],[5.6,2.8],[7.7,2.8],[6.3,2.7],[6.7,3.3],[7.2,3.2],[6.2,2.8],[6.1,3],[6.4,2.8],[7.2,3],[7.4,2.8],[7.9,3.8],[6.4,2.8],[6.3,2.8],[6.1,2.6],[7.7,3],[6.3,3.4],[6.4,3.1],[6,3],[6.9,3.1],[6.7,3.1],[6.9,3.1],[5.8,2.7],[6.8,3.2],[6.7,3.3],[6.7,3],[6.3,2.5],[6.5,3],[6.2,3.4],[5.9,3]]}],"legend":{"show":true,"data":["setosa","versicolor","virginica"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"Sepal.Width","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"Sepal.Length","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
<p>The <strong>recharts</strong> package was built on top of <a href="http://htmlwidgets.org"><strong>htmlwidgets</strong></a>, which can save us a lot of time on managing JavaScript dependencies and dealing with different types of output documents such as R Markdown and Shiny. You just create a chart, and we will take care of the rest of things when the chart is renderd in R Markdown, Shiny, or the R console / RStudio.</p>
<p>The main function in this package is the <code>echartr()</code> function (an S3 generic function), and we want to make it smart enough to deal with different types of R data automatically. For example, when a data frame is passed to <code>echart()</code>, and the <code>x</code>/<code>y</code> variables are numeric, it should automatically figure out that you probably need a scatterplot, and the axes will be automatically generated. Of course, you can also override the automatic guess.</p>
</div>
<div id="quick-start" class="section level1">
<h1><span class="header-section-number">3</span> Quick Start</h1>
<p>Follow the steps below to make a plot yourself.</p>
<div id="data" class="section level2">
<h2><span class="header-section-number">3.1</span> Data</h2>
<p>Always start from data itself. Let’s use <code>mtcars</code> in the package <code>datasets</code>. You can type <code>?mtcars</code> to read the instruction.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">head</span>(mtcars)</code></pre></div>
<pre><code>##                    mpg cyl disp  hp drat    wt  qsec vs am gear carb
## Mazda RX4         21.0   6  160 110 3.90 2.620 16.46  0  1    4    4
## Mazda RX4 Wag     21.0   6  160 110 3.90 2.875 17.02  0  1    4    4
## Datsun 710        22.8   4  108  93 3.85 2.320 18.61  1  1    4    1
## Hornet 4 Drive    21.4   6  258 110 3.08 3.215 19.44  1  0    3    1
## Hornet Sportabout 18.7   8  360 175 3.15 3.440 17.02  0  0    3    2
## Valiant           18.1   6  225 105 2.76 3.460 20.22  1  0    3    1</code></pre>
<p>We want to know the relationship between <code>wt</code> (weight) and <code>mpg</code> (miles per gallon), a scatterplot is a good fit. It requires x and y variables of numeric.</p>
</div>
<div id="core-plot" class="section level2">
<h2><span class="header-section-number">3.2</span> Core Plot</h2>
<p>Use <code>echartr</code> to build the basic chart.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(mtcars, wt, mpg)</code></pre></div>
<div id="htmlwidget-e587968bbb86818efdfc" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-e587968bbb86818efdfc">{"x":{"series":[{"type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.2,32.4],[1.615,30.4],[1.835,33.9],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]]}],"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"legend":{"show":true,"data":[],"x":"left","y":"top","orient":"horizontal"}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
<p>The grammar of <code>echartr</code> is</p>
<pre><code>## function (data, x = NULL, y = NULL, series = NULL, weight = NULL, 
##     facet = NULL, t = NULL, lat = NULL, lng = NULL, type = &quot;auto&quot;, 
##     subtype = NULL, elementId = NULL, ...)</code></pre>
<div id="arguments" class="section level3">
<h3><span class="header-section-number">3.2.1</span> Arguments</h3>
<table>
<colgroup>
<col width="15%" />
<col width="84%" />
</colgroup>
<thead>
<tr class="header">
<th><strong>Arg</strong></th>
<th><strong>Interpretation</strong></th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><p><strong>data</strong></p></td>
<td><p>source data in the form of data.frame</p></td>
</tr>
<tr class="even">
<td><p>x</p></td>
<td><p>Independent variable(s). One or more columns of <code>data</code>. Could be time, numeric or characters.</p>
<ul>
<li>In Cartesian coordinate system charts, <code>x</code> is linked with x-axis</li>
<li>In polar coordinate system charts, <code>x</code> var1 is linked with polar-axis, and <code>x</code> var2 is data series (linked with legends)</li>
<li>In other chart types, mono-coordinate system charts refer to Cartesian coordinat system examples, while multi-coordinates system charts refer to polar system examples.</li>
</ul></td>
</tr>
<tr class="odd">
<td><p>y</p></td>
<td><p>dependent variable(s). One or more columns of <code>data</code>. Always numeric.</p></td>
</tr>
<tr class="even">
<td><p>series</p></td>
<td><p>series variable. A column of <code>data</code> which is treated as factors.</p></td>
</tr>
<tr class="odd">
<td><p>weight</p></td>
<td><p>weight variable used in bubble, bar/column, line/area chart, linking with the size of graph elements.</p></td>
</tr>
<tr class="even">
<td><p>facet</p></td>
<td><p>facet variable to devide the canvas into facets. Only applicable for multi-coordinate system charts (e.g., pie charts).</p></td>
</tr>
<tr class="odd">
<td><p>t</p></td>
<td><p>time variable. If <code>t</code> is assigned, a timeline widget will display.</p></td>
</tr>
<tr class="even">
<td><p>lat</p></td>
<td><p>latitude variable for map/heatmap.</p></td>
</tr>
<tr class="odd">
<td><p>lng</p></td>
<td><p>longitude variable for map/heatmap.</p></td>
</tr>
<tr class="even">
<td><p>type</p></td>
<td><p>chart type. Default ‘auto’. <code>type</code> as a vector is linked with <code>series</code>, while as a list is linked with <code>facet</code>.</p></td>
</tr>
<tr class="odd">
<td><p>subtype</p></td>
<td><p>chart subtype. Default NULL. <code>subtype</code> as a vector is also linked with <code>series</code>, while as a list is linked with <code>facet</code>.</p></td>
</tr>
</tbody>
</table>
</div>
<div id="supported-chart-types" class="section level3">
<h3><span class="header-section-number">3.2.2</span> Supported Chart Types</h3>
<p><code>echartr</code> now supports the following types (the regex patterns in ‘name’ column, case insensitive). The ‘type’ column lists chart type names supported by Echarts2.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">knitr::<span class="kw">kable</span>(recharts:::validChartTypes[,<span class="kw">c</span>(<span class="dv">1</span>:<span class="dv">3</span>,<span class="dv">5</span>)])</code></pre></div>
<table>
<thead>
<tr class="header">
<th align="right">id</th>
<th align="left">name</th>
<th align="left">type</th>
<th align="left">misc</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td align="right">1</td>
<td align="left">^(scatter|point)$</td>
<td align="left">scatter</td>
<td align="left"></td>
</tr>
<tr class="even">
<td align="right">2</td>
<td align="left">^(bubble)$</td>
<td align="left">scatter</td>
<td align="left">bubble</td>
</tr>
<tr class="odd">
<td align="right">3</td>
<td align="left">^(bar|hbar)$</td>
<td align="left">bar</td>
<td align="left">flip</td>
</tr>
<tr class="even">
<td align="right">4</td>
<td align="left">^(vbar|column)$</td>
<td align="left">bar</td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="right">5</td>
<td align="left">^(histogram|hist)$</td>
<td align="left">hist</td>
<td align="left"></td>
</tr>
<tr class="even">
<td align="right">6</td>
<td align="left">^(line)$</td>
<td align="left">line</td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="right">7</td>
<td align="left">^(curve)$</td>
<td align="left">line</td>
<td align="left">smooth</td>
</tr>
<tr class="even">
<td align="right">8</td>
<td align="left">^(area)$</td>
<td align="left">line</td>
<td align="left">fill</td>
</tr>
<tr class="odd">
<td align="right">9</td>
<td align="left">^(wave)$</td>
<td align="left">line</td>
<td align="left">fill_smooth</td>
</tr>
<tr class="even">
<td align="right">10</td>
<td align="left">^(map_world|world_map)$</td>
<td align="left">map</td>
<td align="left">world</td>
</tr>
<tr class="odd">
<td align="right">11</td>
<td align="left">^(map_china|china_map)$</td>
<td align="left">map</td>
<td align="left">china</td>
</tr>
<tr class="even">
<td align="right">12</td>
<td align="left">^(map_world_multi|world_map_multi)$</td>
<td align="left">map</td>
<td align="left">world_multi</td>
</tr>
<tr class="odd">
<td align="right">13</td>
<td align="left">^(map_china_multi|china_map_multi)$</td>
<td align="left">map</td>
<td align="left">china_multi</td>
</tr>
<tr class="even">
<td align="right">14</td>
<td align="left">^(map)$</td>
<td align="left">map</td>
<td align="left">geojson</td>
</tr>
<tr class="odd">
<td align="right">15</td>
<td align="left">^(k|candlestick)$</td>
<td align="left">k</td>
<td align="left"></td>
</tr>
<tr class="even">
<td align="right">16</td>
<td align="left">^(pie)$</td>
<td align="left">pie</td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="right">17</td>
<td align="left">^(ring)$</td>
<td align="left">pie</td>
<td align="left">ring</td>
</tr>
<tr class="even">
<td align="right">18</td>
<td align="left">^(rose)$</td>
<td align="left">pie</td>
<td align="left">rose</td>
</tr>
<tr class="odd">
<td align="right">19</td>
<td align="left">^(chord)$</td>
<td align="left">chord</td>
<td align="left"></td>
</tr>
<tr class="even">
<td align="right">20</td>
<td align="left">^(force|force_curve)$</td>
<td align="left">force</td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="right">21</td>
<td align="left">^(force_line)$</td>
<td align="left">force</td>
<td align="left">line</td>
</tr>
<tr class="even">
<td align="right">22</td>
<td align="left">^(funnel)$</td>
<td align="left">funnel</td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="right">23</td>
<td align="left">^(pyramid)$</td>
<td align="left">funnel</td>
<td align="left">ascending</td>
</tr>
<tr class="even">
<td align="right">24</td>
<td align="left">^(tree|vtree|tree_vertical)$</td>
<td align="left">tree</td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="right">25</td>
<td align="left">^(htree|tree_horizontal)$</td>
<td align="left">tree</td>
<td align="left">horizontal</td>
</tr>
<tr class="even">
<td align="right">26</td>
<td align="left">^(tree_inv|vtree_inv|tree_vertical_inv)$</td>
<td align="left">tree</td>
<td align="left">inv</td>
</tr>
<tr class="odd">
<td align="right">27</td>
<td align="left">^(htree_inv|tree_horizontal_inv)$</td>
<td align="left">tree</td>
<td align="left">horizontal_inv</td>
</tr>
<tr class="even">
<td align="right">28</td>
<td align="left">^(treemap)$</td>
<td align="left">treemap</td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="right">29</td>
<td align="left">^(wordcloud)$</td>
<td align="left">wordCloud</td>
<td align="left"></td>
</tr>
<tr class="even">
<td align="right">30</td>
<td align="left">^(heatmap)$</td>
<td align="left">heatmap</td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="right">31</td>
<td align="left">^(radar|spider|star)$</td>
<td align="left">radar</td>
<td align="left"></td>
</tr>
<tr class="even">
<td align="right">32</td>
<td align="left">^(gauge|dashboard)$</td>
<td align="left">gauge</td>
<td align="left"></td>
</tr>
<tr class="odd">
<td align="right">33</td>
<td align="left">^(eventriver)$</td>
<td align="left">eventRiver</td>
<td align="left"></td>
</tr>
<tr class="even">
<td align="right">34</td>
<td align="left">^(venn)$</td>
<td align="left">venn</td>
<td align="left"></td>
</tr>
</tbody>
</table>
<p>You assign <code>data</code> and <code>x</code>, <code>y</code>, then <code>echartr</code> automatically processes the data using <code>recharts:::series_scatter</code> function.</p>
<p>If <code>series</code> is assigned, a series-specfic scatterplot is shown.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(mtcars, wt, mpg, <span class="kw">factor</span>(am, <span class="dt">labels=</span><span class="kw">c</span>(<span class="st">&#39;Automatic&#39;</span>, <span class="st">&#39;Manual&#39;</span>)))</code></pre></div>
<div id="htmlwidget-7d6285b765d7c62e2dda" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-7d6285b765d7c62e2dda">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]]},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]]}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
<p>If <code>weight</code> is assigned and <code>type</code> is set <code>bubble</code>, a bubble chart is displayed.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(mtcars, wt, mpg, am, <span class="dt">weight=</span>gear, <span class="dt">type=</span><span class="st">&#39;bubble&#39;</span>)</code></pre></div>
<div id="htmlwidget-fc225d18e93ece81a9ee" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-fc225d18e93ece81a9ee">{"x":{"series":[{"name":"0","type":"scatter","data":[[3.215,21.4,3],[3.44,18.7,3],[3.46,18.1,3],[3.57,14.3,3],[3.19,24.4,4],[3.15,22.8,4],[3.44,19.2,4],[3.44,17.8,4],[4.07,16.4,3],[3.73,17.3,3],[3.78,15.2,3],[5.25,10.4,3],[5.424,10.4,3],[5.345,14.7,3],[2.465,21.5,3],[3.52,15.5,3],[3.435,15.2,3],[3.84,13.3,3],[3.845,19.2,3]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/3));\n                }"},{"name":"1","type":"scatter","data":[[2.62,21,4],[2.875,21,4],[2.32,22.8,4],[2.2,32.4,4],[1.615,30.4,4],[1.835,33.9,4],[1.935,27.3,4],[2.14,26,5],[1.513,30.4,5],[3.17,15.8,5],[2.77,19.7,5],[3.57,15,5],[2.78,21.4,4]],"symbolSize":"function (value){\n                return 4*Math.round(Math.abs(value[2]/3));\n                }"}],"legend":{"show":true,"data":["0","1"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"}},"evals":["series.0.symbolSize","series.1.symbolSize","tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="special-notes" class="section level3">
<h3><span class="header-section-number">3.2.3</span> Special Notes</h3>
<div id="param-list" class="section level4">
<h4><span class="header-section-number">3.2.3.1</span> Param List</h4>
<p>The input param list could be</p>
<ul>
<li>symbols: <code>wt</code>, <code>mpg</code> or even as complicated as <code>factor(am, labels=c('Automatic', 'Mannual'))</code></li>
<li>characters: <code>'wt'</code>, <code>'mpg'</code></li>
<li>formulas: <code>~wt</code>, <code>~mpg</code></li>
</ul>
</div>
<div id="data-requirements" class="section level4">
<h4><span class="header-section-number">3.2.3.2</span> Data Requirements</h4>
<p>Data must be a data.frame. The data series and timeline will display in the original order of <code>series</code> and <code>z</code>, so you should sort the data.frame before making charts so as to make sure the display order is exactly what you want.</p>
<p>When it comes to timeline (<code>z</code>), you must be very cautious. All the combination sets of <code>x</code>, <code>y</code>, <code>series</code>, <code>weight</code> should be exactly equal across all the levels of <code>z</code>. Otherwise you will find confusious overlap of graphs across timeline.</p>
</div>
<div id="type-and-subtype" class="section level4">
<h4><span class="header-section-number">3.2.3.3</span> Type And Subtype</h4>
<div id="mixed-types" class="section level5">
<h5><span class="header-section-number">3.2.3.3.1</span> Mixed Types</h5>
<p><code>recharts</code> supports mixed chart types in some cases, e.g., bar and line.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">d &lt;-<span class="st"> </span>data.table::<span class="kw">dcast</span>(mtcars, carb+gear~., mean, <span class="dt">value.var=</span><span class="st">&#39;mpg&#39;</span>)
<span class="kw">names</span>(d)[<span class="dv">3</span>] &lt;-<span class="st"> &#39;mean.mpg&#39;</span>
d$carb &lt;-<span class="st"> </span><span class="kw">as.character</span>(d$carb)
<span class="kw">echartr</span>(d, carb, <span class="st">&quot;mean.mpg&quot;</span>, gear, <span class="dt">type=</span><span class="kw">c</span>(<span class="st">&#39;vbar&#39;</span>, <span class="st">&#39;vbar&#39;</span>, <span class="st">&#39;line&#39;</span>)) %&gt;%<span class="st"> </span>
<span class="st">    </span><span class="kw">setSymbols</span>(<span class="st">&#39;emptycircle&#39;</span>)</code></pre></div>
<div id="htmlwidget-b586c3c8a6a383e5a3df" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-b586c3c8a6a383e5a3df">{"x":{"series":[{"name":"3","type":"bar","data":[20.3333333333333,17.15,16.3,12.62,"-","-"]},{"name":"4","type":"bar","data":[29.1,24.75,"-",19.75,"-","-"]},{"name":"5","type":"line","data":["-",28.2,"-",15.8,19.7,15]}],"legend":{"show":true,"data":["3","4","5"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mean.mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"category","show":true,"position":"bottom","name":"carb","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["1","2","3","4","6","8"]}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"shadow","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n       var i;\n       var j;\n       var text;\n       var text1;\n       var sName = \"\";\n       if (params.length > 1){\n            if (params[0].value.length >1) {\n                text1 = params[0].value[0];\n            } else {\n                text1 = params[0].value;\n            }\n            text = params[0].name;\n            if (params[0].seriesName) {\n                sName = params[0].seriesName;\n            }\n       } else {\n            if (params[0].value.length > 1) {\n                text1 = params[0].value[0];\n            } else {\n                text1 = params[0].value;\n            }\n            text = params[0].name;\n            if (params[0].seriesName) {\n                sName = params[0].seriesName;\n            }\n       }\n       if (params.length > 1){\n           text += \"<br/>\" + params[0].seriesName + \" :  \" + text1;\n           if (params[0].value.length > 1){\n                for (j = 1; j < params[0].value.length; j++){\n                    text += \", \" + params[0].value[j];\n                }\n           }\n           for (i = 1; i < params.length; i++) {\n                if (params[i].value.length > 1){\n                   text += \"<br/>\" + params[i].seriesName + \" :  \"\n                        + params[i].value[0];\n                   for (j = 1; j < params[i].value.length; j++){\n                        text += \", \" + params[i].value[j];\n                   }\n                } else {\n                   text += \"<br/>\" + params[i].seriesName + \" :  \"\n                        + params[i].value;\n                }\n           }\n       } else {\n           if (params[0].seriesName){\n               text += \"<br/>\" + params[0].seriesName + \" :  \" + text1;\n           } else {\n               text += \" :  \" + text1;\n           }\n           if (params[0].value.length > 1){\n                for (j = 1; j < params[0].value.length; j++){\n                    text += \", \" + params[0].value[j];\n                }\n           }\n       }\n       return text;\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["line","bar","tiled","stack"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["emptyCircle","emptyCircle","emptyCircle"]},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
<p>Or mixed subtypes. Refer to ‘subtype’ column in <code>recharts:::validChartTypes</code>. You can assign combined subtypes using ‘+’, ’_‘or’|‘, e.g., ’stack+smooth’ to simultaneously render the line chart stacked and smooth.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">echartr</span>(d, carb, mean.mpg, gear, <span class="dt">type=</span><span class="st">&#39;line&#39;</span>, 
        <span class="dt">subtype=</span><span class="kw">c</span>(<span class="st">&#39;stack + smooth&#39;</span>, <span class="st">&#39;stack + dotted&#39;</span>, <span class="st">&#39;smooth + dashed&#39;</span>)) %&gt;%
<span class="st">    </span><span class="kw">setSymbols</span>(<span class="st">&#39;emptycircle&#39;</span>)</code></pre></div>
<div id="htmlwidget-9edaf6630c112cf20d5b" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-9edaf6630c112cf20d5b">{"x":{"series":[{"name":"3","type":"line","data":[20.3333333333333,17.15,16.3,12.62,"-","-"],"stack":"Group","smooth":true,"showAllSymbol":true},{"name":"4","type":"line","data":[29.1,24.75,"-",19.75,"-","-"],"stack":"Group","itemStyle":{"normal":{"lineStyle":{"type":"dotted"}}},"showAllSymbol":true},{"name":"5","type":"line","data":["-",28.2,"-",15.8,19.7,15],"itemStyle":{"normal":{"lineStyle":{"type":"dashed"}}},"showAllSymbol":true}],"legend":{"show":true,"data":["3","4","5"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mean.mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"category","show":true,"position":"bottom","name":"carb","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["1","2","3","4","6","8"]}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"line","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n       var i;\n       var j;\n       var text;\n       var text1;\n       var sName = \"\";\n       if (params.length > 1){\n            if (params[0].value.length >1) {\n                text1 = params[0].value[0];\n            } else {\n                text1 = params[0].value;\n            }\n            text = params[0].name;\n            if (params[0].seriesName) {\n                sName = params[0].seriesName;\n            }\n       } else {\n            if (params[0].value.length > 1) {\n                text1 = params[0].value[0];\n            } else {\n                text1 = params[0].value;\n            }\n            text = params[0].name;\n            if (params[0].seriesName) {\n                sName = params[0].seriesName;\n            }\n       }\n       if (params.length > 1){\n           text += \"<br/>\" + params[0].seriesName + \" :  \" + text1;\n           if (params[0].value.length > 1){\n                for (j = 1; j < params[0].value.length; j++){\n                    text += \", \" + params[0].value[j];\n                }\n           }\n           for (i = 1; i < params.length; i++) {\n                if (params[i].value.length > 1){\n                   text += \"<br/>\" + params[i].seriesName + \" :  \"\n                        + params[i].value[0];\n                   for (j = 1; j < params[i].value.length; j++){\n                        text += \", \" + params[i].value[j];\n                   }\n                } else {\n                   text += \"<br/>\" + params[i].seriesName + \" :  \"\n                        + params[i].value;\n                }\n           }\n       } else {\n           if (params[0].seriesName){\n               text += \"<br/>\" + params[0].seriesName + \" :  \" + text1;\n           } else {\n               text += \" :  \" + text1;\n           }\n           if (params[0].value.length > 1){\n                for (j = 1; j < params[0].value.length; j++){\n                    text += \", \" + params[0].value[j];\n                }\n           }\n       }\n       return text;\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":true,"type":["line","bar","tiled","stack"]},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["emptyCircle","emptyCircle","emptyCircle"]},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="associating-typesubtype-with-facets" class="section level5">
<h5><span class="header-section-number">3.2.3.3.2</span> Associating Type/Subtype with Facets</h5>
<p>The above example shows how to associate type/subtype with series. If you want to associate type/subtype with facets, you need to wrap them in a list. Within each list, the vector of type/subtypes are associated with series, ie, list[[1]], list[[2]], … are associated with facet 1, 2, …, while list[[1]][1], list[[1]][2], … are associated with series 1, 2, …</p>
<p>If facet has 2 levels and series has 3 levels, it means type and subtype should have a structure of list(c(s1,s2,s3), c(s1,s2,s3)). recharts will try to supplement/cut the income params type and subtype to meet the mapping relationship.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">d1 &lt;-<span class="st"> </span><span class="kw">data.frame</span>(<span class="dt">x=</span><span class="kw">rep</span>(LETTERS[<span class="dv">1</span>:<span class="dv">6</span>], <span class="dv">4</span>), <span class="dt">y=</span><span class="kw">abs</span>(<span class="kw">rnorm</span>(<span class="dv">24</span>)), 
                 <span class="dt">f=</span><span class="kw">c</span>(<span class="kw">rep</span>(<span class="st">&#39;i&#39;</span>, <span class="dv">12</span>), <span class="kw">rep</span>(<span class="st">&#39;ii&#39;</span>, <span class="dv">12</span>)), 
                 <span class="dt">s=</span><span class="kw">rep</span>(<span class="kw">c</span>(<span class="kw">rep</span>(<span class="st">&#39;I&#39;</span>, <span class="dv">6</span>), <span class="kw">rep</span>(<span class="st">&#39;II&#39;</span>, <span class="dv">6</span>)), <span class="dv">2</span>))
<span class="kw">echartr</span>(d1, x, y, s, <span class="dt">facet=</span>f, <span class="dt">type=</span><span class="st">&#39;radar&#39;</span>, 
        <span class="dt">subtype=</span><span class="kw">list</span>(<span class="kw">c</span>(<span class="st">&#39;fill&#39;</span>, <span class="st">&#39;&#39;</span>), <span class="kw">c</span>(<span class="st">&#39;&#39;</span>, <span class="st">&#39;fill&#39;</span>)))</code></pre></div>
<div id="htmlwidget-d4922a1810a3db8a022e" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-d4922a1810a3db8a022e">{"x":{"series":[{"type":"radar","symbol":"none","name":"i","data":[{"name":"I","value":[0.463877238661712,0.357076571773603,1.47345055289485,0.168915894676362,0.667166492727383,1.26508798354406],"itemStyle":{"normal":{"areaStyle":{"type":"default"}}}},{"name":"II","value":[0.22242831419531,0.625951171609326,0.011059524321388,2.38846418154088,0.0218559719257092,0.0573206533920298]}]},{"type":"radar","symbol":"none","name":"ii","data":[{"name":"I","value":[0.261818320195643,0.761668064974124,0.929088128006388,2.17106981029918,0.341715545099842,1.34916654731129]},{"name":"II","value":[0.861178888649934,0.41644060516046,0.546007217327691,0.718108593067697,0.384476827706474,0.0390626905616082],"itemStyle":{"normal":{"areaStyle":{"type":"default"}}}}],"polarIndex":1}],"legend":{"show":true,"data":["I","II"],"x":"left","y":"top","orient":"horizontal"},"xAxis":[{"type":"category","show":false,"position":"bottom","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"data":["A","B","C","D","E","F"]}],"yAxis":[{"type":"value","show":false,"position":"left","name":"","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"grid":{"borderWidth":0},"tooltip":{"show":true,"trigger":"item","axisPointer":{"type":"none","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"polar":[{"center":["27.5%","50%"],"radius":"39.25%","indicator":[{"text":"A","max":1.03341466637992},{"text":"B","max":0.914001677968949},{"text":"C","max":1.76814066347382},{"text":"D","max":2.86615701784906},{"text":"E","max":0.800599791272859},{"text":"F","max":1.61899985677355}]},{"center":["72.5%","50%"],"radius":"39.25%","indicator":[{"text":"A","max":1.03341466637992},{"text":"B","max":0.914001677968949},{"text":"C","max":1.76814066347382},{"text":"D","max":2.86615701784906},{"text":"E","max":0.800599791272859},{"text":"F","max":1.61899985677355}]}]},"evals":[],"jsHooks":[]}</script>
</div>
</div>
</div>
</div>
<div id="modify-the-plot" class="section level2">
<h2><span class="header-section-number">3.3</span> Modify the Plot</h2>
<p>You can save the plot as an object and keep modifying the plot using <code>%&gt;%</code>.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g =<span class="st"> </span><span class="kw">echartr</span>(mtcars, wt, mpg, <span class="kw">factor</span>(am, <span class="dt">labels=</span><span class="kw">c</span>(<span class="st">&#39;Automatic&#39;</span>, <span class="st">&#39;Manual&#39;</span>)))</code></pre></div>
<div id="tune-the-series" class="section level3">
<h3><span class="header-section-number">3.3.1</span> Tune the Series</h3>
<p>The above command made an Echarts object <code>g</code> containing two series: ‘Automatic’ and ‘Manual’. The data strcuture of <code>g</code> is:</p>
<pre><code>- x
  |-- series
      |--- list 1
           |---- name: &#39;Automatic&#39;
           |---- data: ...
           |---- type: &#39;scatter&#39;
      |--- list 2
           |---- name: &#39;Manual&#39;
           |---- data: ...
           |---- type: &#39;scatter&#39;
      |--- ...
  |-- legend
  |-- xAxis
  |-- yAxis
  |-- grid  
  |-- tooltip
  |-- ...</code></pre>
<p>If you want to customize the definition of the series directly, you can call the low-level function <code>setSeries</code>.</p>
<p>Let’s set ‘Manual’ series (series index 2) symbolSize 8, symbolRotate 30.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setSeries</span>(<span class="dt">series=</span><span class="dv">2</span>, <span class="dt">symbolSize=</span><span class="dv">8</span>, <span class="dt">symbolRotate=</span><span class="dv">30</span>)</code></pre></div>
<div id="htmlwidget-259cc3d7c15fd9025df5" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-259cc3d7c15fd9025df5">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]]},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]],"symbolSize":8,"symbolRotate":30}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="markline" class="section level3">
<h3><span class="header-section-number">3.3.2</span> markLine</h3>
<p>Markline the average level of the two series.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">addMarkLine</span>(<span class="dt">data=</span><span class="kw">data.frame</span>(<span class="dt">type=</span><span class="st">&#39;average&#39;</span>, <span class="dt">name1=</span><span class="st">&#39;Avg&#39;</span>))</code></pre></div>
<div id="htmlwidget-b746bf1d25bf27d92b34" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-b746bf1d25bf27d92b34">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]],"markLine":{"data":[{"name":"Avg","type":"average"}],"clickable":true,"symbol":["circle","arrow"],"smooth":false,"symbolSize":[2,4],"large":false,"effect":{"show":false},"smoothness":0.2,"precision":2,"bundling":{"enable":false,"maxTurningAngle":45}}},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]],"markLine":{"data":[{"name":"Avg","type":"average"}],"clickable":true,"symbol":["circle","arrow"],"smooth":false,"symbolSize":[2,4],"large":false,"effect":{"show":false},"smoothness":0.2,"precision":2,"bundling":{"enable":false,"maxTurningAngle":45}}}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="markpoint" class="section level3">
<h3><span class="header-section-number">3.3.3</span> markPoint</h3>
<p>Markpoint the maximum of series 1 (‘Automatic’).</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">addMarkPoint</span>(<span class="dt">series=</span><span class="dv">1</span>, <span class="dt">data=</span><span class="kw">data.frame</span>(<span class="dt">type=</span><span class="st">&#39;max&#39;</span>, <span class="dt">name=</span><span class="st">&#39;Max&#39;</span>))</code></pre></div>
<div id="htmlwidget-472d9b1a5fde3111314c" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-472d9b1a5fde3111314c">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]],"markPoint":{"data":[{"name":"Max","type":"max"}],"clickable":true,"symbol":"pin","symbolSize":10,"large":false,"effect":{"show":false}}},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]]}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
<p>It’s the same as</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">addMarkPoint</span>(<span class="dt">series=</span><span class="st">&#39;Automatic&#39;</span>, <span class="dt">data=</span><span class="kw">data.frame</span>(<span class="dt">type=</span><span class="st">&#39;max&#39;</span>, <span class="dt">name=</span><span class="st">&#39;Max&#39;</span>))</code></pre></div>
</div>
<div id="title" class="section level3">
<h3><span class="header-section-number">3.3.4</span> Title</h3>
<p>Add title (in red) and subtitle (with reference link to <a href="https://stat.ethz.ch/R-manual/R-devel/library/datasets/html/mtcars.html" class="uri">https://stat.ethz.ch/R-manual/R-devel/library/datasets/html/mtcars.html</a>) to the chart.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">link &lt;-<span class="st"> &#39;https://stat.ethz.ch/R-manual/R-devel/library/datasets/html/mtcars.html&#39;</span>
g %&gt;%<span class="st"> </span><span class="kw">setTitle</span>(<span class="st">&#39;wt vs mpg&#39;</span>, <span class="kw">paste0</span>(<span class="st">&#39;[Motor Trend](&#39;</span>, link, <span class="st">&#39;)&#39;</span>), 
               <span class="dt">textStyle=</span><span class="kw">list</span>(<span class="dt">color=</span><span class="st">&#39;red&#39;</span>))</code></pre></div>
<div id="htmlwidget-07baa7469d6f739b51ba" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-07baa7469d6f739b51ba">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]]},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]]}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"title":{"text":"wt vs mpg","subtext":"Motor Trend","sublink":"https://stat.ethz.ch/R-manual/R-devel/library/datasets/html/mtcars.html","x":"center","y":"bottom","orient":"horizontal","textStyle":{"color":"red"}}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="legend" class="section level3">
<h3><span class="header-section-number">3.3.5</span> Legend</h3>
<p>Modify the legend (in lime), and only select series 1 (‘Automatic’) at the beginning.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setLegend</span>(<span class="dt">selected=</span><span class="st">&#39;Automatic&#39;</span>, <span class="dt">textStyle=</span><span class="kw">list</span>(<span class="dt">color=</span><span class="st">&#39;lime&#39;</span>))</code></pre></div>
<div id="htmlwidget-14a36b28432b2af0e164" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-14a36b28432b2af0e164">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]]},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]]}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal","selected":{"Manual":false},"selectedMode":"single","textStyle":{"color":"lime"}},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="toolbox" class="section level3">
<h3><span class="header-section-number">3.3.6</span> Toolbox</h3>
<p>Modify toolbox as English, and put it to the upper-right of the chart with vertical display.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setToolbox</span>(<span class="dt">lang=</span><span class="st">&#39;en&#39;</span>, <span class="dt">pos=</span><span class="dv">2</span>)</code></pre></div>
<div id="htmlwidget-b5696f994034248dcd47" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-b5696f994034248dcd47">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]]},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]]}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true,"title":{"mark":"Apply Auxiliary Conductor","markUndo":"Undo Auxiliary Conductor","markClear":"Clear Auxiliary Conductor"}},"dataZoom":{"show":true,"title":{"dataZoom":"Data Zoom","dataZoomReset":"Reset Data Zoom"}},"dataView":{"show":true,"readOnly":false,"title":"Data View","lang":["Data View","Close","Refresh"]},"magicType":{"show":false},"restore":{"show":true,"title":"Restore"},"saveAsImage":{"show":true,"title":"Save As Image","lang":"Click to Save"}},"x":"right","y":"top","orient":"vertical"}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="datazoom" class="section level3">
<h3><span class="header-section-number">3.3.7</span> DataZoom</h3>
<p>Add dataZoom (orignally there is not one).</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setDataZoom</span>()</code></pre></div>
<div id="htmlwidget-906ce5edcac69d996284" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-906ce5edcac69d996284">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]]},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]]}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"dataZoom":{"show":true,"orient":"horizontal","height":30,"x":80}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="axis" class="section level3">
<h3><span class="header-section-number">3.3.8</span> Axis</h3>
<p>Modify axes to make x- and y-axis cross at zero.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setXAxis</span>(<span class="dt">min=</span><span class="dv">0</span>) %&gt;%<span class="st"> </span><span class="kw">setYAxis</span>(<span class="dt">min=</span><span class="dv">0</span>)</code></pre></div>
<div id="htmlwidget-b083440106dfd11df660" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-b083440106dfd11df660">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]]},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]]}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"min":0}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false},"min":0}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"}},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
</div>
<div id="fortify-the-chart" class="section level2">
<h2><span class="header-section-number">3.4</span> Fortify the Chart</h2>
<div id="theme" class="section level3">
<h3><span class="header-section-number">3.4.1</span> Theme</h3>
<p>Apply ‘dark’ theme to the chart. You can also apply “macarons”, “infographic”, “blue”, “dark”, “gray”, “green”, “helianthus”, “macarons2”, “mint”, “red”, “roma”, “sakura”, “shine”, and “vintage”.</p>
<p>Calculable is a special interation in Echarts. In other charts (e.g.,pie), it is quite efficient.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setTheme</span>(<span class="st">&#39;dark&#39;</span>, <span class="dt">calculable=</span><span class="ot">TRUE</span>)</code></pre></div>
<div id="htmlwidget-7784fa3aaa1cbca5287f" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-7784fa3aaa1cbca5287f">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]]},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]]}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"theme":"dark","calculable":true},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
<div id="symbols" class="section level3">
<h3><span class="header-section-number">3.4.2</span> Symbols</h3>
<p>Set symbolList for series 1 (‘Automatic’) ‘heart’ and that for series 2 (‘Manual’) ‘star6’.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setSymbols</span>(<span class="kw">c</span>(<span class="st">&#39;heart&#39;</span>, <span class="st">&#39;star6&#39;</span>))</code></pre></div>
<div id="htmlwidget-8539ac0a6ca76d9594f1" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-8539ac0a6ca76d9594f1">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]]},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]]}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal"},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true},"dataZoom":{"show":true},"dataView":{"show":true,"readOnly":false},"magicType":{"show":false},"restore":{"show":true},"saveAsImage":{"show":true}},"x":"right","y":"top","orient":"horizontal"},"symbolList":["heart","star6"]},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
</div>
<div id="altogether" class="section level2">
<h2><span class="header-section-number">3.5</span> Altogether</h2>
<p>You can combine all the steps using a pipe chain. If you are familiar with JS, you can embed JS fragments using <code>JS()</code> for better effects.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">g %&gt;%<span class="st"> </span><span class="kw">setSeries</span>(<span class="dt">series=</span><span class="dv">2</span>, <span class="dt">symbolSize=</span><span class="dv">8</span>, <span class="dt">symbolRotate=</span><span class="dv">30</span>) %&gt;%<span class="st"> </span>
<span class="st">    </span><span class="kw">addMarkLine</span>(<span class="dt">data=</span><span class="kw">data.frame</span>(<span class="dt">type=</span><span class="st">&#39;average&#39;</span>, <span class="dt">name1=</span><span class="st">&#39;Avg&#39;</span>)) %&gt;%
<span class="st">    </span><span class="kw">addMarkPoint</span>(<span class="dt">series=</span><span class="dv">1</span>, <span class="dt">data=</span><span class="kw">data.frame</span>(<span class="dt">type=</span><span class="st">&#39;max&#39;</span>, <span class="dt">name=</span><span class="st">&#39;Max&#39;</span>)) %&gt;%
<span class="st">    </span><span class="kw">setTitle</span>(<span class="st">&#39;wt vs mpg&#39;</span>, <span class="kw">paste0</span>(<span class="st">&#39;[Motor Trend](&#39;</span>, link, <span class="st">&#39;)&#39;</span>), 
               <span class="dt">textStyle=</span><span class="kw">list</span>(<span class="dt">color=</span><span class="st">&#39;red&#39;</span>)) %&gt;%
<span class="st">    </span><span class="kw">setLegend</span>(<span class="dt">selected=</span><span class="st">&#39;Automatic&#39;</span>, <span class="dt">textStyle=</span><span class="kw">list</span>(<span class="dt">color=</span><span class="st">&#39;lime&#39;</span>)) %&gt;%
<span class="st">    </span><span class="kw">setToolbox</span>(<span class="dt">lang=</span><span class="st">&#39;en&#39;</span>, <span class="dt">pos=</span><span class="dv">2</span>) %&gt;%<span class="st"> </span><span class="kw">setDataZoom</span>() %&gt;%<span class="st"> </span>
<span class="st">    </span><span class="kw">setTheme</span>(<span class="st">&#39;dark&#39;</span>, <span class="dt">calculable=</span><span class="ot">TRUE</span>) %&gt;%<span class="st"> </span><span class="kw">setSymbols</span>(<span class="kw">c</span>(<span class="st">&#39;heart&#39;</span>, <span class="st">&#39;star6&#39;</span>))</code></pre></div>
<div id="htmlwidget-63c84e7c75872f26258c" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-63c84e7c75872f26258c">{"x":{"series":[{"name":"Automatic","type":"scatter","data":[[3.215,21.4],[3.44,18.7],[3.46,18.1],[3.57,14.3],[3.19,24.4],[3.15,22.8],[3.44,19.2],[3.44,17.8],[4.07,16.4],[3.73,17.3],[3.78,15.2],[5.25,10.4],[5.424,10.4],[5.345,14.7],[2.465,21.5],[3.52,15.5],[3.435,15.2],[3.84,13.3],[3.845,19.2]],"markLine":{"data":[{"name":"Avg","type":"average"}],"clickable":true,"symbol":["circle","arrow"],"smooth":false,"symbolSize":[2,4],"large":false,"effect":{"show":false},"smoothness":0.2,"precision":2,"bundling":{"enable":false,"maxTurningAngle":45}},"markPoint":{"data":[{"name":"Max","type":"max"}],"clickable":true,"symbol":"pin","symbolSize":10,"large":false,"effect":{"show":false}}},{"name":"Manual","type":"scatter","data":[[2.62,21],[2.875,21],[2.32,22.8],[2.2,32.4],[1.615,30.4],[1.835,33.9],[1.935,27.3],[2.14,26],[1.513,30.4],[3.17,15.8],[2.77,19.7],[3.57,15],[2.78,21.4]],"symbolSize":8,"symbolRotate":30,"markLine":{"data":[{"name":"Avg","type":"average"}],"clickable":true,"symbol":["circle","arrow"],"smooth":false,"symbolSize":[2,4],"large":false,"effect":{"show":false},"smoothness":0.2,"precision":2,"bundling":{"enable":false,"maxTurningAngle":45}}}],"legend":{"show":true,"data":["Automatic","Manual"],"x":"left","y":"top","orient":"horizontal","selected":{"Manual":false},"selectedMode":"single","textStyle":{"color":"lime"}},"yAxis":[{"type":"value","show":true,"position":"left","name":"mpg","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"xAxis":[{"type":"value","show":true,"position":"bottom","name":"wt","nameLocation":"end","boundaryGap":[0,0],"scale":true,"axisLine":{"show":true,"onZero":false},"axisTick":{"show":false},"axisLabel":{"show":true},"splitLine":{"show":true},"splitArea":{"show":false}}],"tooltip":{"show":true,"trigger":"axis","axisPointer":{"type":"cross","crossStyle":{"type":"dashed"},"lineStyle":{"type":"solid","width":1},"shadowStyle":{"color":"rgba(150,150,150,0.3)","width":"auto","type":"default"}},"textStyle":{"color":"#fff"},"formatter":"function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \"\"){\n        if (params.value.length > 1) {\n            for (i = 1; i < params.value.length; i++){\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \" : \" + text;\n        }\n    } else {\n        if (params.value.length > 1) {\n            text = params.seriesName + \" :<br/>\" + text;\n            for (i = 1; i < params.value.length; i++) {\n                text += \" ,    \" + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \" :<br/>\"\n            + params.name + \" : \" + text;\n        }\n    }\n    }","islandFormatter":"{a} < br/>{b} : {c}","enterable":false,"showDelay":20,"hideDelay":100,"transitionDuration":0.4,"backgroundColor":"rgba(0,0,0,0.7)","borderColor":"#333","borderWidth":0,"borderRadius":4},"toolbox":{"show":true,"feature":{"mark":{"show":true,"title":{"mark":"Apply Auxiliary Conductor","markUndo":"Undo Auxiliary Conductor","markClear":"Clear Auxiliary Conductor"}},"dataZoom":{"show":true,"title":{"dataZoom":"Data Zoom","dataZoomReset":"Reset Data Zoom"}},"dataView":{"show":true,"readOnly":false,"title":"Data View","lang":["Data View","Close","Refresh"]},"magicType":{"show":false},"restore":{"show":true,"title":"Restore"},"saveAsImage":{"show":true,"title":"Save As Image","lang":"Click to Save"}},"x":"right","y":"top","orient":"vertical"},"title":{"text":"wt vs mpg","subtext":"Motor Trend","sublink":"https://stat.ethz.ch/R-manual/R-devel/library/datasets/html/mtcars.html","x":"center","y":"bottom","orient":"horizontal","textStyle":{"color":"red"}},"dataZoom":{"show":true,"orient":"horizontal","height":30,"y2":50,"y":870,"x":80},"grid":{"y2":110},"theme":"dark","calculable":true,"symbolList":["heart","star6"]},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
</div>
</div>
<div id="low-level-api" class="section level1">
<h1><span class="header-section-number">4</span> Low-level API</h1>
<div id="de-novo" class="section level2">
<h2><span class="header-section-number">4.1</span> De Novo</h2>
<p>Given that ECharts supports so many types of charts, it may take a while for us to make <code>echartr()</code> really smart. With that in mind, we also provided a really low-level S3 method defined for lists. Since the main usage of ECharts is that you pass a JavaScript object to the method <code>.setOption()</code>, and we can construct such an object using a list in R. This low-level <code>echart.list()</code> method makes it possible for you to create arbitrary charts. Here is a simple example of a Chord diagram taken from <a href="http://echarts.baidu.com/doc/example/chord1.html" class="uri">http://echarts.baidu.com/doc/example/chord1.html</a>:</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r">chordEx1 =<span class="st"> </span><span class="kw">list</span>(
  <span class="dt">title =</span> <span class="kw">list</span>(
    <span class="dt">text =</span> <span class="st">&#39;测试数据&#39;</span>,
    <span class="dt">subtext =</span> <span class="st">&#39;From d3.js&#39;</span>,
    <span class="dt">x =</span> <span class="st">&#39;right&#39;</span>,
    <span class="dt">y =</span> <span class="st">&#39;bottom&#39;</span>
  ),
  <span class="dt">tooltip =</span> <span class="kw">list</span>(
    <span class="dt">trigger =</span> <span class="st">&#39;item&#39;</span>,
    <span class="dt">formatter =</span> <span class="kw">JS</span>(<span class="st">&#39;function(params) {</span>
<span class="st">      if (params.indicator2) { // is edge</span>
<span class="st">        return params.value.weight;</span>
<span class="st">      } else {// is node</span>
<span class="st">        return params.name</span>
<span class="st">      }</span>
<span class="st">    }&#39;</span>)
  ),
  <span class="dt">toolbox =</span> <span class="kw">list</span>(
    <span class="dt">show =</span> <span class="ot">TRUE</span>,
    <span class="dt">feature =</span> <span class="kw">list</span>(
      <span class="dt">restore =</span> <span class="kw">list</span>(<span class="dt">show =</span> <span class="ot">TRUE</span>),
      <span class="dt">magicType =</span> <span class="kw">list</span>(<span class="dt">show =</span> <span class="ot">TRUE</span>, <span class="dt">type =</span> <span class="kw">c</span>(<span class="st">&#39;force&#39;</span>, <span class="st">&#39;chord&#39;</span>)),
      <span class="dt">saveAsImage =</span> <span class="kw">list</span>(<span class="dt">show =</span> <span class="ot">TRUE</span>)
    )
  ),
  <span class="dt">legend =</span> <span class="kw">list</span>(
    <span class="dt">x =</span> <span class="st">&#39;left&#39;</span>,
    <span class="dt">data =</span> <span class="kw">c</span>(<span class="st">&#39;group1&#39;</span>, <span class="st">&#39;group2&#39;</span>, <span class="st">&#39;group3&#39;</span>, <span class="st">&#39;group4&#39;</span>)
  ),
  <span class="dt">series =</span> <span class="kw">list</span>(
    <span class="kw">list</span>(
      <span class="dt">type =</span> <span class="st">&#39;chord&#39;</span>,
      <span class="dt">sort =</span> <span class="st">&#39;ascending&#39;</span>,
      <span class="dt">sortSub =</span> <span class="st">&#39;descending&#39;</span>,
      <span class="dt">showScale =</span> <span class="ot">TRUE</span>,
      <span class="dt">showScaleText =</span> <span class="ot">TRUE</span>,
      <span class="dt">data =</span> <span class="kw">list</span>(
        <span class="kw">list</span>(<span class="dt">name =</span> <span class="st">&#39;group1&#39;</span>),
        <span class="kw">list</span>(<span class="dt">name =</span> <span class="st">&#39;group2&#39;</span>),
        <span class="kw">list</span>(<span class="dt">name =</span> <span class="st">&#39;group3&#39;</span>),
        <span class="kw">list</span>(<span class="dt">name =</span> <span class="st">&#39;group4&#39;</span>)
      ),
      <span class="dt">itemStyle =</span> <span class="kw">list</span>(
        <span class="dt">normal =</span> <span class="kw">list</span>(
          <span class="dt">label =</span> <span class="kw">list</span>(<span class="dt">show =</span> <span class="ot">FALSE</span>)
        )
      ),
      <span class="dt">matrix =</span> <span class="kw">rbind</span>(
        <span class="kw">c</span>(<span class="dv">11975</span>,  <span class="dv">5871</span>, <span class="dv">8916</span>, <span class="dv">2868</span>),
        <span class="kw">c</span>( <span class="dv">1951</span>, <span class="dv">10048</span>, <span class="dv">2060</span>, <span class="dv">6171</span>),
        <span class="kw">c</span>( <span class="dv">8010</span>, <span class="dv">16145</span>, <span class="dv">8090</span>, <span class="dv">8045</span>),
        <span class="kw">c</span>( <span class="dv">1013</span>,   <span class="dv">990</span>,  <span class="dv">940</span>, <span class="dv">6907</span>)
      )
    )
  )
)

<span class="kw">echart</span>(chordEx1)</code></pre></div>
<div id="htmlwidget-3a8a52c82aeea009b25c" style="width:672px;height:480px;" class="echarts html-widget"></div>
<script type="application/json" data-for="htmlwidget-3a8a52c82aeea009b25c">{"x":{"title":{"text":"测试数据","subtext":"From d3.js","x":"right","y":"bottom"},"tooltip":{"trigger":"item","formatter":"function(params) {\n      if (params.indicator2) { // is edge\n        return params.value.weight;\n      } else {// is node\n        return params.name\n      }\n    }"},"toolbox":{"show":true,"feature":{"restore":{"show":true},"magicType":{"show":true,"type":["force","chord"]},"saveAsImage":{"show":true}}},"legend":{"x":"left","data":["group1","group2","group3","group4"]},"series":[{"type":"chord","sort":"ascending","sortSub":"descending","showScale":true,"showScaleText":true,"data":[{"name":"group1"},{"name":"group2"},{"name":"group3"},{"name":"group4"}],"itemStyle":{"normal":{"label":{"show":false}}},"matrix":[[11975,5871,8916,2868],[1951,10048,2060,6171],[8010,16145,8090,8045],[1013,990,940,6907]]}]},"evals":["tooltip.formatter"],"jsHooks":[]}</script>
<p>Apparently, all we did was to translate the JavaScript object in the <a href="http://echarts.baidu.com/doc/example/chord1.html">original example</a> into R. Note we translated the function <code>tooltip.fomatter</code> using the <code>JS()</code> function in <strong>htmlwidgets</strong>. All other objects can be mapped naturally to R.</p>
</div>
<div id="modify-the-echarts-object" class="section level2">
<h2><span class="header-section-number">4.2</span> Modify the Echarts Object</h2>
<p>We can also yield an echarts object using <code>echartr</code> and then modify the object directly as we do to a S3 list, if we are familiar with echarts data structure.</p>
<p>The following is the structure of the object <code>g</code> we producted by <code>echartr(mtcars, wt, mpg, factor(am, labels=c('Automatic', 'Mannual')))</code>.</p>
<div class="sourceCode"><pre class="sourceCode r"><code class="sourceCode r"><span class="kw">enquote</span>(g)</code></pre></div>
<pre><code>## quote(list(x = list(series = list(list(name = &quot;Automatic&quot;, type = &quot;scatter&quot;, 
##     data = list(list(3.215, 21.4), list(3.44, 18.7), list(3.46, 
##         18.1), list(3.57, 14.3), list(3.19, 24.4), list(3.15, 
##         22.8), list(3.44, 19.2), list(3.44, 17.8), list(4.07, 
##         16.4), list(3.73, 17.3), list(3.78, 15.2), list(5.25, 
##         10.4), list(5.424, 10.4), list(5.345, 14.7), list(2.465, 
##         21.5), list(3.52, 15.5), list(3.435, 15.2), list(3.84, 
##         13.3), list(3.845, 19.2))), list(name = &quot;Manual&quot;, type = &quot;scatter&quot;, 
##     data = list(list(2.62, 21), list(2.875, 21), list(2.32, 22.8), 
##         list(2.2, 32.4), list(1.615, 30.4), list(1.835, 33.9), 
##         list(1.935, 27.3), list(2.14, 26), list(1.513, 30.4), 
##         list(3.17, 15.8), list(2.77, 19.7), list(3.57, 15), list(
##             2.78, 21.4)))), legend = list(show = TRUE, data = list(
##     &quot;Automatic&quot;, &quot;Manual&quot;), x = &quot;left&quot;, y = &quot;top&quot;, orient = &quot;horizontal&quot;), 
##     yAxis = list(list(type = &quot;value&quot;, show = TRUE, position = &quot;left&quot;, 
##         name = &quot;mpg&quot;, nameLocation = &quot;end&quot;, boundaryGap = c(0, 
##         0), scale = TRUE, axisLine = list(show = TRUE, onZero = FALSE), 
##         axisTick = list(show = FALSE), axisLabel = list(show = TRUE), 
##         splitLine = list(show = TRUE), splitArea = list(show = FALSE))), 
##     xAxis = list(list(type = &quot;value&quot;, show = TRUE, position = &quot;bottom&quot;, 
##         name = &quot;wt&quot;, nameLocation = &quot;end&quot;, boundaryGap = c(0, 
##         0), scale = TRUE, axisLine = list(show = TRUE, onZero = FALSE), 
##         axisTick = list(show = FALSE), axisLabel = list(show = TRUE), 
##         splitLine = list(show = TRUE), splitArea = list(show = FALSE))), 
##     tooltip = list(show = TRUE, trigger = &quot;axis&quot;, axisPointer = list(
##         type = &quot;cross&quot;, crossStyle = list(type = &quot;dashed&quot;), lineStyle = list(
##             type = &quot;solid&quot;, width = 1), shadowStyle = list(color = &quot;rgba(150,150,150,0.3)&quot;, 
##             width = &quot;auto&quot;, type = &quot;default&quot;)), textStyle = list(
##         color = &quot;#fff&quot;), formatter = &quot;function (params) {\n    var i;\n    var text = params.value[0];\n    if (params.seriesName === null || params.seriesName === \&quot;\&quot;){\n        if (params.value.length &gt; 1) {\n            for (i = 1; i &lt; params.value.length; i++){\n                text += \&quot; ,    \&quot; + params.value[i];\n            }\n            return text;\n        } else {\n            return params.name + \&quot; : \&quot; + text;\n        }\n    } else {\n        if (params.value.length &gt; 1) {\n            text = params.seriesName + \&quot; :&lt;br/&gt;\&quot; + text;\n            for (i = 1; i &lt; params.value.length; i++) {\n                text += \&quot; ,    \&quot; + params.value[i];\n            }\n            return text;\n        } else {\n            return params.seriesName + \&quot; :&lt;br/&gt;\&quot;\n            + params.name + \&quot; : \&quot; + text;\n        }\n    }\n    }&quot;, 
##         islandFormatter = &quot;{a} &lt; br/&gt;{b} : {c}&quot;, enterable = FALSE, 
##         showDelay = 20, hideDelay = 100, transitionDuration = 0.4, 
##         backgroundColor = &quot;rgba(0,0,0,0.7)&quot;, borderColor = &quot;#333&quot;, 
##         borderWidth = 0, borderRadius = 4), toolbox = list(show = TRUE, 
##         feature = list(mark = list(show = TRUE), dataZoom = list(
##             show = TRUE), dataView = list(show = TRUE, readOnly = FALSE), 
##             magicType = list(show = FALSE), restore = list(show = TRUE), 
##             saveAsImage = list(show = TRUE)), x = &quot;right&quot;, y = &quot;top&quot;, 
##         orient = &quot;horizontal&quot;)), width = NULL, height = NULL, 
##     sizingPolicy = list(defaultWidth = NULL, defaultHeight = NULL, 
##         padding = NULL, viewer = list(defaultWidth = NULL, defaultHeight = NULL, 
##             padding = NULL, fill = TRUE, suppress = FALSE, paneHeight = NULL), 
##         browser = list(defaultWidth = NULL, defaultHeight = NULL, 
##             padding = NULL, fill = FALSE), knitr = list(defaultWidth = NULL, 
##             defaultHeight = NULL, figure = TRUE)), dependencies = NULL, 
##     elementId = NULL, preRenderHook = NULL, jsHooks = list()))</code></pre>
</div>
</div>
<div id="finale" class="section level1">
<h1><span class="header-section-number">5</span> Finale</h1>
<p>Normally we do not want R users to specify a long list of options like that. As R users, you are more familiar with (and often work with) data structures like data frames, matrices, tables, and so on. Ideally we hope you can just pass a familiar data object, and we configure ECharts automatically for you whenever possible. We will be happy to know your feedback, and you are welcome to contribute code through <a href="https://github.com/madlogos/recharts">Github pull requests</a>.</p>
</div>

<script type="text/javascript">
window.onload = function() {
  var i, fig = 1, caps = document.getElementsByClassName('caption');
  for (i = 0; i < caps.length; i++) {
    var cap = caps[i];
    if (cap.parentElement.className !== 'figure' || cap.nodeName !== 'P')
      continue;
    cap.innerHTML = '<span>Figure ' + fig + ':</span> ' + cap.innerHTML;
    fig++;
  }
  fig = 1;
  caps = document.getElementsByTagName('caption');
  for (i = 0; i < caps.length; i++) {
    var cap = caps[i];
    if (cap.parentElement.nodeName !== 'TABLE') continue;
    cap.innerHTML = '<span>Table ' + fig + ':</span> ' + cap.innerHTML;
    fig++;
  }
}
</script>



</div>

<script>

// add bootstrap table styles to pandoc tables
function bootstrapStylePandocTables() {
  $('tr.header').parent('thead').parent('table').addClass('table table-condensed');
}
$(document).ready(function () {
  bootstrapStylePandocTables();
});


</script>

<!-- dynamically load mathjax for compatibility with self-contained -->
<script>
  (function () {
    var script = document.createElement("script");
    script.type = "text/javascript";
    script.src  = "https://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML";
    document.getElementsByTagName("head")[0].appendChild(script);
  })();
</script>

</body>
</html>
